<template>
  <div id="app">
    <div class="container">
      <div class="close"><span class="iconfont iconicon-test"></span></div>
      <div class="logo"><span class="iconfont iconnew"></span></div>
      <div class="inputs">
        <!-- <input placeholder="请输入手机号" class="input">
            <input placeholder="密码" class="input" type="password"> -->
            
        <van-form ref="form">
            <!-- 
                rules: 用于添加表单的校验规则
                    required: 表示该表单内容为必传值
                    message: 当用户输入的内容不符合校验规则的时候的一个提示文字
             -->
          <van-field
            v-model="user.username"
            placeholder="用户名"
            :rules="[{ required: true, message: '请填写用户名' }]"
          />
          <van-field
            v-model="user.password"
            type="password"
            placeholder="密码"
            :rules="[{ required: true, message: '请填写密码' }]"
          />
          <p class="tips">
            没有账号？
            <a href="#/register" class="">去注册</a>
          </p>
          <!-- 注意：click事件是vant组件库提供给我们的 -->
          <van-button icon="star-o" type="danger" 
          round block @click="loginFn">登录</van-button>
        </van-form>
      </div>
    </div>
  </div>
</template>

<script>
import { login } from "../api/user.js"
export default {
    data(){
        return {
            // 如果需要传多个参数给后端，一般情况我们会把这些参数写在一个对象中
            // 因为这样调用接口的时候方便传值
            user: {
                // 变量名一般我们也不要随便取名字，我们可以看接口文档，文档中要求我们通过什么名字
                // 给后端传值，那么我们前端就取什么名字，因为这样方便调用接口的时候传值和后期维护
                username: "13543456767",
                password: ""
            }
        }
    },
    methods:{
        // 登录
        loginFn(){
            // console.log(this.user);
          // 1、验证表单是否通过，通过则只需登录接口 
          // validate方法，当校验通过则触发then函数，否则触发catch
          this.$refs.form.validate().then(()=>{
            console.log("校验通过");
            // 2、调用接口实现登录 
            login(this.user).then(res=>{
              console.log(60,res);
              if(res.data.message === "登录成功"){
                this.$toast.success(res.data.message)
                // 保存token和用户ID
                localStorage.setItem("74-token",res.data.data.token)
                localStorage.setItem("74-userId", res.data.data.user.id)
                // 跳转到首页
                this.$router.push({
                  path: "/index"
                })
              }else{
                // 失败
                this.$toast.fail(res.data.message)
              }
            })
          }).catch(err=>{
            console.log("校验不通过");
          })
        }
    }
};
</script>

<style lang="less" scoped >
.van-cell::after {
  border-color: #666;
}
div.inputs input {
  margin-bottom: 10px;
}
// style标签上需要添加lang属性并设置值为less，我们才能够在这个style标签内容写less语法
.container {
  padding: 20px;
}
.close {
  span {
    font-size: (27 / 360) * 100vw;
  }
}
.logo {
  display: flex;
  justify-content: center;

  span {
    display: block;
    font-size: (126 / 360) * 100vw;
    color: #d81e06;
  }
}
.inputs {
  input {
    margin-bottom: 20px;
  }
}
.tips {
  text-align: right;
  margin-bottom: 20px;
  margin-top: 5px;
  a {
    color: #3385ff;
  }
}
</style>